<template>
<van-nav-bar
  :fixed='true'
  :z-index="zIndex">
  <div slot="left"><van-icon class="iconfont" class-prefix='my-icon' name='xiangxi' /></div>
  <van-search @click="searchClick" slot="title"></van-search>
  <mini-player slot="right"></mini-player>
</van-nav-bar>
</template>

<script>
import { Search, NavBar, Icon } from 'vant'
import miniPlayer from './miniPlayer'
export default {
  name: 'NavBar1',
  components: {
    [Search.name]: Search,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    miniPlayer
  },
  data() {
    return {
      zIndex: 2
    }
  },
  methods: {
    searchClick () {
      this.$router.push({
        path: '/search'
      })
    }
  }
}
</script>

<style scoped>
 .NavBar{
   position: fixed;
   width: 100%;
   z-index: 2;
 }
>>> .van-search{
  padding: 0;
  padding-top: 6px;
}
>>>.van-nav-bar__title{
  max-width: 70%;
}
>>>.van-icon{
  color:#CACACA;
}
>>>.van-nav-bar__left{
  width: 10%;
  left: 11px;
}
</style>
